<script lang="ts" setup>
import { AddCircleSharp } from '@vicons/ionicons5'
import { ref, onMounted, inject } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import ShortKeyTag from '../components/ShortKeyTag.vue';
const shortkeys = [{ 'key': 'Tab', 'desc': '新建mem' }, { 'key': 'Esc', 'desc': '退出' }]
import { setWinSizeKey } from '../model/type'


const handleWinSize = inject(setWinSizeKey)
onMounted(() => {
    handleWinSize!()
})
const createMem = () => {
    router.push('/memEditor')
}
</script>
<template>
    <n-card style="width: 650px;">
        <n-space vertical>
            <n-space>
                <n-space vertical align="start">
                    <span>Mem</span>
                    <n-button text>
                        <template #icon>
                            <n-icon>
                                <AddCircleSharp />
                            </n-icon>
                        </template>
                        Save webpage to a new mem
                    </n-button>
                    <n-button text>
                        <template #icon>
                            <n-icon>
                                <AddCircleSharp />
                            </n-icon>
                        </template>
                        Send to an existing mem
                    </n-button>
                    <span>Actions</span>
                    <n-button text @click="createMem">
                        <template #icon>
                            <n-icon>
                                <AddCircleSharp />
                            </n-icon>
                        </template>
                        Create a new mem
                    </n-button>
                </n-space>
                <n-space vertical>
                    <n-card style="height: 200px;">
                        <span>Press Enter to save webpage to a new mem</span>
                    </n-card>
                </n-space>
            </n-space>


            <n-space align="center" justify="center">
                <ShortKeyTag v-for="(item, index) in shortkeys" :data="item" :key="index"></ShortKeyTag>
            </n-space>
        </n-space>

    </n-card>
</template>
<style scoped></style>